<template>
<div class="navMenu">
    <div class="menu-box">
        <!-- <el-menu default-active="" :router="true">
          <div v-for="(item,index) in props.navList" :key="'item-'+ index">
            <el-submenu index="" v-if="item.child">
                <template slot="title">
                    <span>{{item.name}}</span>
                </template>
                <el-menu-item v-for="(li,k) in item.child" :key="'li-'+k" :index="li.path">
                    <span class="el-icon-point"></span>
                    <span>{{li.name}}</span>
                </el-menu-item>
          </el-submenu>
          <el-menu-item :index="item.path" v-else>
            <span>{{item.name}}</span>
        </el-menu-item>
          </div>
        </el-menu> -->
    <!-- <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        @select="handleSelect"
        :router="true"
    >
        <el-menu-item :index="'/dataQuery'">
            <span>数据查询</span>
        </el-menu-item>
        <el-menu-item :index="'/fileManage'">
            <span>文件管理</span>
        </el-menu-item>
        <el-menu-item :index="'/clearSetting'">
            <span>定期清理设置</span>
        </el-menu-item>
        <el-menu-item :index="'/operateInfo'">
            <span>数据查询</span>
        </el-menu-item> -->
        <div v-for="(item,index) in props.navList" :key="'item-'+index">
            <el-submenu index="" v-if="item.child">
                <template slot="title">
                    <span>{{item.name}}</span>
                </template>
                <el-menu-item v-for="(li,k) in item.child" :key="'li-'+k" :index="li.path">
                    <span class="el-icon-point"></span>
                    <span>{{li.name}}</span>
                </el-menu-item>
          </el-submenu>
          <el-menu-item :index="item.path" v-else>
            <span>{{item.name}}</span>
        </el-menu-item>
        </div>
    </el-menu>
    </div>
</div>
</template>

<script setup lang="ts">
import type { number } from 'echarts';
import {defineProps,ref} from 'vue'
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
interface Tree {
label: string
children?: Tree[]
}
const props = defineProps({
  //子组件接收父组件传递过来的值
  navList: Array,
});
</script>

<style scoped lang="scss">
.navMenu {
    width: 100%;
    height: 100%;
    .menu-box {
        width:100%;
        height:calc(100% - 100px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}
</style>